import React, { useEffect, useState } from 'react';
import { Modal, Form, Button } from 'antd';
import { connect } from 'dva';
import { history } from 'umi';
import styles from './index.less';
import Submit from './submit/index';
import SavaFile from './saveFile/index';

const TestEnvironment = (props) => {
  const [form] = Form.useForm();
  const [deviceInformation, setDeviceInformation] = useState([
    {
      name: '设备类型',
      content: '手机',
    },
    {
      name: '设备型号',
      content: 'HUAWEI CET-AL00(****02277)',
    },
    {
      name: '设备版本',
      content: 'CET-AL00 3.0.0.302(SP1C00E300R5P11log)',
    },
    {
      name: '音量',
      content: '60%',
    },
    {
      name: '屏幕亮度',
      content: '26%',
    },
    {
      name: '芯片平台',
      content: '',
    },
    {
      name: '硬件版本',
      content: '',
    },
    {
      name: 'SN',
      content: 'SXQ0222C27002277',
    },
  ]);
  const [edit, setEdit] = useState(false);
  const openEdit = () => {
    setEdit(true);
  };
  // 归档
  const [saveFile, setSaveFile] = useState(false);
  const openSaveFile = () => {
    setSaveFile(true);
  };
  const [titleList, setTitleList] = useState([
    {
      title: '设备信息',
    },
    {
      title: '应用信息',
    },
    {
      title: '其他信息',
    },
  ]);
  // 一键填写
  const onAutoFill = () => {
    form.setFieldsValue({
      gender: 'demo',
    });
  };
  return (
    <div className={styles.environment}>
      {titleList.map((item, index) => {
        return (
          <div key={index} className={styles.environment_content}>
            <div className={styles.environment_header}>
              <div className={styles.header_left}>
                <div className={styles.header_bar}></div>
                <div className={styles.header_title}>{item.title}</div>
              </div>
              <div style={{ display: 'flex' }}>
                <div
                  className={styles.header_button}
                  style={{
                    display: item.title === '设备信息' ? 'block' : 'none',
                  }}
                  onClick={() => openSaveFile()}
                >
                  归档
                </div>
                <div
                  className={styles.header_button}
                  style={{
                    display: item.title === '设备信息' ? 'block' : 'none',
                    marginLeft: 8,
                  }}
                  onClick={() => openEdit()}
                >
                  编辑
                </div>
              </div>
              <Modal
                title="编辑"
                centered
                open={edit}
                width="35%"
                onOk={() => setEdit(false)}
                onCancel={() => setEdit(false)}
              >
                <Submit />
              </Modal>
            </div>
            <div className={styles.environment_indicator}>
              {deviceInformation.map((jtem, index) => {
                return (
                  <span key={index} className={styles.indicator}>
                    <div className={styles.indicator_title}>{jtem.name}</div>
                    <div className={styles.indicator_data}>{jtem.content}</div>
                  </span>
                );
              })}
            </div>
          </div>
        );
      })}
      <Modal
        title={
          <span>
            归档{' '}
            <Button onClick={onAutoFill} style={{ marginLeft: 24 }}>
              {' '}
              一键填写
            </Button>
          </span>
        }
        centered
        okText="归档"
        cancelText="关闭"
        open={saveFile}
        width="35%"
        onOk={() => setSaveFile(false)}
        onCancel={() => setSaveFile(false)}
      >
        <SavaFile form={form} />
      </Modal>
    </div>
  );
};
export default TestEnvironment;
// export default connect(({}) => ({}))(TestEnvironment);
